import React, { Fragment } from 'react'
import './index.less'
import http from 'libs/http';
import Tabs from '../../components/Tabs'
import { Pagination } from 'antd'
import { Dialog, MediaPlayer } from 'components'

export default class FreeClasses extends React.Component {
  state = {
    tabsData: [
      { courseType: 0, name: '全部课程', active: true },
      { courseType: 1, name: '龙英语', },
      { courseType: 3, name: '龙编程' },
    ],
    queryData: {
      courseType: 0,
      pageIndex: 1,
      pageSize: 6,
      platformType: 0,
    },
    total: 0,
    freeClassesList: [],
    mediaShow: false,
    mediaTitle: '',
    mediaUrl: '',
  }

  componentDidMount() {
    // this.uploadPlatformType(this.props)
    this.getAuditionsList()
  }

  // componentWillReceiveProps(nextProps) {
  //   this.uploadPlatformType(nextProps)
  // }

  // 初始化或切换左侧menu时，获取路由参数
  // uploadPlatformType = (nextProps) => {
  //   const { platformType } = nextProps.match.params
  //   this.setState(state => ({
  //     queryData: {...state.queryData, platformType }
  //   }), this.getAuditionsList)
  // }
  
  // 获取免费试听课列表
  getAuditionsList = () => {
    const { queryData } = this.state
    http.get('/student/open-course/list', queryData).then(res => {
      const { total, list } = res.data
      const listLen = list.length
      if(listLen < 6) {
        list.length = 6
        list.fill({}, listLen, 6)
      }
      this.setState({
        total, freeClassesList: list
      })
    })
  }

  // 全部课程、龙英语、龙编程之间切换
  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState(state => ({
      tabsData, queryData: {...state.queryData, courseType}
    }), this.getAuditionsList)
  }

  // 切换页码
  changePage = (page) => {
    this.setState(state => ({
      queryData: { ...state.queryData, pageIndex: page }
    }), this.getAuditionsList)
  }

  // 点击立即预约、免费播放
  handleClick = course => () => {
    const { platformType, courseId, courseName, programmeUrl } = course
    const showErrorNotice = true
    // 直播
    if(platformType === 2 ){
      http.post('/student/open-course/enroll', { courseId }, undefined, showErrorNotice).then(res => {
        Dialog({
          message: res.data
        })
      })
    }
    // 录播
    else if(platformType === 3) {
      this.setState({
        mediaShow: true,
        mediaTitle: courseName,
        mediaUrl: programmeUrl
      })
    }
  }

  onCancel = () => {
    this.setState({ mediaShow: false })
  }

  render() {
    const { tabsData, total, freeClassesList, mediaUrl, mediaTitle, mediaShow } = this.state
    return (
      <div className="public-class">
        <Tabs tabsData={tabsData} changeTab={this.changeTab} fontColor="#fff" />
        <div className="public-class-contaienr">
          <div className="public-class-content">
            {
              freeClassesList.map((item, index) => {
                const { platformType, status, pcUrl, courseName, courseId, programmeUrl } = item
                let btnStr = ''
                let handleDisable = true
                if(platformType === 3) {
                  btnStr = '免费试听'
                  handleDisable = false
                }else{
                  switch(status) {
                    case 1: 
                      btnStr = '立即报名'
                      handleDisable = false
                      break;
                    case 2:
                      btnStr = '已报名'
                      break;
                    case 3:
                      btnStr = '已结束'
                      break;
                  }
                }
                return (
                  Object.keys(item).length > 0 ? <div key={courseId} className="public-class-item">
                    <div className="img-wrap">
                      <img src={pcUrl} />
                      <span className={platformType === 2 ? 'live-icon' : 'recorded-icon'}>{platformType===2 ? '直播' : '录播'}</span>
                    </div>
                    <p>{courseName}</p>
                    <span 
                      className={platformType===2 ? `status${status}` : ''}
                      onClick={handleDisable ? () => {} : this.handleClick(item) }
                    >{btnStr}</span>
                  </div> : <div key={index} className="public-class-item"></div>
                )
              })
            }
          </div>
          
          <div className="pagination-container">
            <Pagination
              size="small"
              pageSize={6}
              total={total}
              showQuickJumper
              hideOnSinglePage={true}
              onChange={this.changePage}
            />
          </div>
        </div>
        <MediaPlayer 
          src={mediaUrl}
          title={mediaTitle}
          show={mediaShow}
          onCancel={this.onCancel}
        />
      </div>
    )
  }
}